<template>
	<view>
		<view class="map-box h-470">
			<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="markers">
			</map>
		</view>
		<!-- 图片 -->
		<!-- <u--image
			style="position: absolute; top: 300rpx; left: 174rpx;"
			:showLoading="true" 
			:src="getImg('finish-order')" 
			width="376rpx"
			height="142rpx"
		></u--image> -->
		<!-- 组件 -->
		<view class="schedulebox ">
			<view class="tittext mar-b10">美容师正在上门</view>
			<view class="ctttext">距您<span>1.3</span>km，预计13分钟</view>
		</view>



		<view class="block-box bor-r24 padlr24 padtb32 pos-rel">
			<view class="block-tit f-s36">
				<text v-if="false">预计<text class='tit-time'>14:00</text>到达</text>
				<view v-if="true" class="flex-a" @click="onOrderTracking">
					<view class="f-s36 mar-r6">
						开始服务
					</view>
					<u--image :showLoading="true" :src="getImg('arrow-right')" width="16rpx" height="24rpx"></u--image>
				</view>
				<view v-else class="finishtext">订单已完成</view>
			</view>
			<u-line margin="32rpx 0"></u-line>
			<view class="store-info flex-a">
				<u--image :showLoading="true" :src="getImg('store-icon')" width="31rpx" height="31rpx"></u--image>
				<view class="store-tit marlr6">
					爱美丽美容
				</view>
				<u--image :showLoading="true" :src="getImg('arrow-right')" width="16rpx" height="24rpx"></u--image>
			</view>
			<view class="product-info flex mar-t20">
				<u--image :showLoading="true" :src="getImg('swiper-img')" width="192rpx" height="144rpx"
					radius="14rpx"></u--image>
				<view class="pad-l14 h-144 info-r flex-col ju-bt">
					<view class="info-tit">
						瓷肌美白 通透亮肤 舒缓保湿美白淡斑组合套餐
					</view>
					<view class=" flex-a ju-bt">
						<view class="info-num">
							x1
						</view>
						<view class="info-price">
							¥1980
						</view>
					</view>
				</view>
			</view>
			<u-line margin="28rpx 0 22rpx"></u-line>
			<view class="cell-box flex-a ju-bt">
				<view class="cell-label">
					路费
				</view>
				<view class="cell-val">
					¥3
				</view>
			</view>
			<view class="cell-box flex-a ju-bt mar-t20">
				<view class="cell-label">
					消费总额
				</view>
				<view class="cell-val cor-FF7171">
					¥1983
				</view>
			</view>
			<view class="cell-box flex-a ju-bt mar-t20">
				<view class="cell-label">
					卡金
				</view>
				<view class="cell-val">
					¥1982
				</view>
			</view>
			<view class="cell-box flex-a ju-bt mar-t20">
				<view class="cell-label">
					赠金
				</view>
				<view class="cell-val">
					¥1
				</view>
			</view>
			<u-line margin="24rpx 0"></u-line>
			<view class="cell-box flex-a ju-bt">
				<view class="cell-label">
					预约时间
				</view>
				<view class="cell-val">
					2024-10-20 14:00
				</view>
			</view>
			<view class="cell-box flex-a ju-bt mar-t20">
				<view class="cell-label">
					预约员工
				</view>
				<view class="cell-val">
					陈雅馨
				</view>
			</view>
			<view class="cell-box flex-a ju-bt mar-t20">
				<view class="cell-label">
					下单时间
				</view>
				<view class="cell-val">
					2024-10-20 09:30:30
				</view>
			</view>
			<view class="cell-box flex-a ju-bt mar-t20">
				<view class="cell-label">
					上门地址
				</view>
				<view class="cell-val">
					浙江省温州市乐清市柳市镇108号
				</view>
			</view>
		</view>
		<view class="fot-btn-box flex-center mar-t40">
			<view class="btn flex-center" @click="$goRouter('/pages/subscribe/pages/orderEvaluate')">
				去评价
			</view>
		</view>
		<orderTracking ref="orderTrackingRef"></orderTracking>
	</view>
</template>

<script>
	import orderTracking from "../components/orderTracking.vue"
	export default {
		components: {
			orderTracking
		},
		data() {
			return {
				/* 地图 */
				latitude: 28.174501,
				longitude: 112.999419,
				/* 地图标点信息 */
				markers: [{
					latitude: 28.174501,
					longitude: 112.999419,
					// iconPath: item.avatar,
					width: '20px',
					height: '30px',
					label: {
						content: `美容师正在上门 \n 距您1.3km，预计13分钟`,
						color: "#111111",
						padding: '20rpx',
						borderColor: "#fff",
						bgColor: '#fff',
						anchorY: '-15',
						anchorX: 15
					}
				}],
			}
		},
		onLoad() {

		},
		methods: {
			onOrderTracking() {
				this.$refs.orderTrackingRef.showModal = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.schedulebox {
		width: 376rpx;
		height: 142rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
		position: absolute;
		top: 300rpx;
		left: 174rpx;

		.tittext {
			width: 224rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.ctttext {
			width: 300rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #444444;
			text-align: left;
			font-style: normal;
			text-transform: none;

			span {
				color: #FF7171;
			}
		}
	}


	.finishtext {
		width: 180rpx;
		height: 50rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.fot-btn-box {
		.btn {
			width: 512rpx;
			height: 80rpx;
			background: #FF7171;
			border-radius: 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.cell-box {
		.cell-label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.cell-val {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.cor-FF7171 {
		color: #FF7171 !important;
	}

	.product-info {
		.info-r {
			width: calc(100% - 192rpx);

			.info-price {
				font-family: MiSans, MiSans;
				font-weight: 600;
				font-size: 28rpx;
				color: #111111;
			}

			.info-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}

			.info-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
				line-height: 33rpx;
			}
		}
	}

	.store-info {
		.store-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
		}
	}

	.block-box {
		margin-top: -20rpx;
		z-index: 99;

		.block-tit {
			.tit-time {
				color: #FF7171;
			}
		}
	}

	.map-box {
		background-color: #f99;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>